.attach-container {
    position: relative;
    overflow: hidden;
    .progress{
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: #000;
        opacity: .4;
        text-align: center;
        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -15px;
            margin-left: -15px;
            height: 30px;
            width: 30px;
            background: transparent !important;
            border-radius: 100%;
            border: 3px solid #fff;
            border-bottom-color: transparent;
            display: inline-block;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation: rotate 1.5s 0s linear infinite;
            animation: rotate 1.5s 0s linear infinite;
        }

        @keyframes rotate {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg); }
            50% {
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg); }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg); }
        }

        //@keyframes scale {
        //    30% {
        //        -webkit-transform: scale(0.3);
        //        transform: scale(0.3); }
        //    100% {
        //        -webkit-transform: scale(1);
        //        transform: scale(1); } }

    }

    &>img{
        //position: relative;
        //z-index: 1;
        //top:50%;
        //left:50%;
        //min-width: 100%;
        //min-height: 100%;
        //transform:translate(-50%,-50%);
        width: 100%;
        height: 100%;
        object-fit:cover;
    }
    input{
        position: absolute;
        top:0;
        left: 0;
        z-index: 3;
        width: 100%;
        height: 100%;
        -webkit-appearance: none;
        opacity: 0;
    }
}


.animated {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

